import React from 'react';
import { UserOutlined, KeyOutlined } from '@ant-design/icons';
import { Col, Row, Flex, Card, Input, Button, message } from 'antd';
import styles from './index.less';
import { useState } from 'react';
import { setToken } from '@/store/token'
import { setUserInfo } from '@/store/userInfo';
import { history, useModel } from '@umijs/max';
import { login, queryCurrentUser } from "../../services/user/index"
function LoginPannel() {
    const [loginData, setLoginData] = useState({ account: "", password: "" })
    const [loading, setLoading] = useState(false)
    const { user } = useModel('userModel')
    const handleLogin = async () => {
        setLoading(true)
        await login(loginData).then(res => {
            if (res.success) {
                setToken(res.data)
                queryCurrentUser().then(res => {
                    if (res.success) {
                        const { data } = res
                        setUserInfo(data)
                        history.push("/dashboard")
                        setLoading(false)
                        //刷新页面以此来获取用户信息
                        history.go(0)
                    }
                })
            } else {
                setLoading(false)
            }
        })

    }
    const handleAccountChange = (e) => {
        setLoginData({ ...loginData, account: e.target.value })
    }
    const handlePasswordChange = (e) => {
        setLoginData({ ...loginData, password: e.target.value })
    }
    return (
        <Flex vertical={true} justify={'center'}>
            <div className={styles.headerStyle}>
                AWD训练平台
            </div>
            <div className={styles.contentStyle}>
                <Flex justify={'center'}>
                    <Card title={<div className={styles.loginCardTitle}>登录</div>} style={{ width: 350 }}>
                        <Input className={styles.inputBox} size='large' placeholder="请输入账号" prefix={<UserOutlined />} value={loginData.account} onChange={handleAccountChange} />
                        <Input className={styles.inputBox} size='large' type='password' placeholder="请输入密码" prefix={<KeyOutlined />} value={loginData.password} onChange={handlePasswordChange} />
                        <div className={styles.loginButtonBox}>
                            <Button className={styles.loginButton} type="primary" loading={loading} onClick={handleLogin}>登录</Button>
                            <Button className={styles.loginButton}>重置</Button>
                        </div>
                    </Card>
                </Flex>
            </div>
            <div className={styles.footerStyle}>
                @2024-2030 think版权所有
            </div>
        </Flex>

    )

};
export default LoginPannel;